<template>
  <div class="box">
    <div id="retailFormat" ref="retailFormat" class="rf-eacht"></div>
    <div class="tot" :style="totStyle">
      <div :style="textLineOneStyle" class="line-one">{{ tot }}</div>
      <div :style="textLineTwoStyle"  class="line-two">
        {{ retailFormatData.totalName }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    retailFormatData: {},
    retailFormatEachrt: {},
    textLineOneStyle:{
      type:String,
      default:'color: #42c7de;font-size: 20px;font-weight: 600'
    },
    textLineTwoStyle:{
      type:String,
      default:'color: #fff;font-size: 14px;font-weight: 600;'
    },
    totStyle:{
      type:String,
      default:'width: 90px;top: 44px;left: 26px;'
    }
  },
  data() {
    return {
      tot: 0,
    };
  },
  components: {},
  mounted() {
    // this.echartsInit();
  },
  beforeDestroy() {},
  methods: {
    echartsInit() {
    
      let that = this;
      let myChart = that.$echarts.init(that.$refs.retailFormat);
      // 总数
      let dataList = that.retailFormatData.echartsData;
      that.tot = dataList.reduce((pre, cur) => pre + cur.value, 0);
      let option = {
        // title: {
        //   show: false,
        //   text: tot,
        //   subtext: that.retailFormatData.totalName,
        //   itemGap: 8,
        //   left: that.retailFormatEachrt.textLeft,
        //   top: that.retailFormatEachrt.textTop,
        //   textStyle: {
        //     color: "#34EFFE",
        //     fontSize: 20,
        //   },
        //   subtextStyle: {
        //     color: "#fff",
        //     fontSize: 14,
        //   },
        //   textAlign: "center",
        // },
        legend: that.retailFormatEachrt.legend,
        // color: ["#58D9F9", "#4992FF", "#7BFFB2", "#FDDD60", "#FF6E76","#48E261"],
        color: [
          // "#42c7de",
          // "#0158e9",
          // "#c36004",
          // "#04c375",
          // "#d3b931",
          // "#cb455e",
          // "#2d92b5",
          '#CB455E',
          '#0158E9',
          '#D3B931',
          '#04C375',
          '#C36004',
          '#4951FF',
          '#42C7DE',
          '#168D6F',
          '#15ABFF',
        ],
        tooltip: {
          show: true,
          formatter: function (params) {
            
            return (
              params.name +
              // "<br/> " +
              // params.marker +
              // params.seriesName +
              ": " +
              ((params.value / that.retailFormatData.totalNum).toFixed(2) * 100).toFixed(2) +
              "%"
            );
          },
        },
        // grid:{
        //   containLabel:true
        // },
        series: [
          {
            name: that.retailFormatData.businessName,
            type: "pie",
            radius: [
              that.retailFormatEachrt.pieWidth,
              that.retailFormatEachrt.pieHeight,
            ],
            center: [
              that.retailFormatEachrt.pieX,
              that.retailFormatEachrt.pieY,
            ],
            itemStyle: {
              borderRadius: 3,
              borderColor: "#02084F",
              borderWidth: 0,
            },
            avoidLabelOverlap: false,
            label: {
              show: false,
            },
            emphasis: {
              label: {
                // show: true,
                fontSize: 12,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: true,
            },
            data: that.retailFormatData.echartsData,
          },
        ],
      };

      myChart.setOption(option);
     
      myChart.off("legendselectchanged");
      myChart.on("legendselectchanged", function (obj) {
        // console.log(obj,'0bj=======================');
        // let selected = obj.selected;
        // let name = obj.name;
        let selectArr = [];
        for (const key in obj.selected) {
          if (obj.selected[key]) {
            selectArr.push(key);
          }
        }
        // console.log(selectArr,'=============');
        let result = 0;
        selectArr.forEach((k) => {
          dataList.forEach((cur) => {
            if (k === cur.name) {
              result += cur.value;
            }
          });
        });
        that.tot = result;
        // console.log(tot,'=========222======');
        // myChart.setOption(option,true);
      });
      myChart.getZr().on("mouseover", (event) => {
        const legendDataIndex = event.topTarget.parent.__legendDataIndex; // 每个legend的index
        // console.log(legendDataIndex,'=====================');
        that.$emit("retailerIntro", legendDataIndex);
      });
      myChart.getZr().on("mouseout", (event) => {
        that.$emit("retailerIntroHide");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  width: 100%;
  height: 100%;
  .tot {
    position: absolute;
    width: 90px;
    top: 44px;
    left: 26px;
    text-align: center;
  }
}
.rf-eacht {
  width: 100%;
  height: 100%;
}
.line-one {
  // color: #42c7de;
  // font-size: 20px;
  // font-weight: 600;
}
.line-two {
  // color: #fff;
  // font-size: 14px;
  // font-weight: 600;
}
</style>
